<template>
  <div id="app">
    <!-- 导航栏组件 -->
    <DefaultNavbar ref="navbarComponent" />

    <!-- 外层容器 -->
    <div class="outer-container">
      <!-- 登录前首页内容 -->
      <template v-if="!isLoggedIn">
        <!-- 轮播模块 -->
        <section class="hero-module">
          <div class="hero-content">
            <div class="text-content">
              <h2>{{t('homepage-introduce.title1')}}<br>{{t('homepage-introduce.title2')}}</h2>
              <h1>{{t('homepage-introduce.title3')}}</h1>
              <p>{{t('homepage-introduce.title4')}}</p>
            </div>

            <!-- 轮播图 -->
            <swiper
                class="carousel-container"
                :modules="[Autoplay, Pagination]"
                :slides-per-view="1"
                :loop="true"
                :autoplay="{ delay: 2000, disableOnInteraction: false }"
                :pagination="{ clickable: true }"
            >
              <swiper-slide v-for="(image, index) in images" :key="index">
                <img
                    :src="image"
                    :alt="`Demo image ${index + 1}`"
                    class="carousel-image"
                    loading="lazy"
                />
              </swiper-slide>
            </swiper>
          </div>
        </section>

        <!-- 功能选项卡 -->
        <section class="feature-tabs">
          <div class="tab-container">
            <div
                v-for="(tab, index) in featureTabs"
                :key="index"
                class="tab"
                @click="navigateToPage(tab.name)"
            >
              <div class="tab-image" :style="{ backgroundImage: `url(${tab.image})` }">
                <div class="tab-overlay"></div>
              </div>
              <div class="tab-content">
                <h3>{{ tab.title }}</h3>
              </div>
            </div>
          </div>
        </section>

        <!-- 功能演示模块 -->
        <section
            v-for="(module, index) in demoModules"
            :key="module.alt"
            :class="['demo-module', { 'reverse-layout': index % 2 }]"
        >
          <img
              :src="module.img"
              :alt="module.alt"
              class="demo-image"
          />
        </section>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/pagination';
import {eventBus} from "@/eventBus/eventBus";
import {useI18n} from "vue-i18n";

const router = useRouter();
const navbarComponent = ref(null); // 引用导航栏组件
const { t } = useI18n();
// 跳转到指定页面
const navigateToPage = (routeName) => {
  // 找到对应的导航索引
  const navIndex = ["/homePage", "/personalPage", "/aboutProject", "/aboutUs"].indexOf(routeName);

  // 如果是已知路由，更新事件总线的 navIndex
  if (navIndex !== -1) {
    eventBus.navIndex = navIndex;
  }

  // 执行路由跳转
  router.push(routeName);
};
// 轮播图图片
const images = ref([
  require('@/assets/ReadMe/About.jpg'),
  require('@/assets/ReadMe/LanguageSettings.jpg'),
  require('@/assets/ReadMe/LoginAndRegisterPage.jpg'),
]);

// 功能演示模块配置
const demoModules = ref([
  {
    img: require('@/assets/ReadMe/LoginAndRegisterPage1.jpg'),
    alt: 'LoginAndRegisterPage1'
  },
  {
    img: require('@/assets/ReadMe/PersonalPage-NotLogin.jpg'),
    alt: 'PersonalPage-NotLogin'
  },
  {
    img: require('@/assets/ReadMe/LoginAndRegisterPage.jpg'),
    alt: 'LoginAndRegisterPage'
  }
]);

// 功能选项卡
const featureTabs = ref([
  {
    title: t('homepage-selected.title1'),
    image: require('@/assets/ReadMe/AboutProject.jpg'),
    name: '/aboutProject' // 对应路由配置中的 name
  },
  {
    title: t('homepage-selected.title2'),
    image: require('@/assets/ReadMe/AboutUs.jpg'),
    name: '/aboutUs' // 对应路由配置中的 name
  },
  {
    title: t('homepage-selected.title3'),
    image: require('@/assets/ReadMe/LoginAndRegisterPage.jpg'),
    name: '/loginAndRegister' // 对应路由配置中的 name
  }
]);

// 登录状态（示例）
const isLoggedIn = ref(false);
</script>

<style scoped>
/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 基础布局 */
.outer-container {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 轮播模块样式 */
.hero-module {
  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
  url("@/assets/guest.jpg") center/cover;
  padding: 4rem 1rem;
}

.hero-content {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.text-content {
  text-align: center;
  color: #2c3e50;
}

.text-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  line-height: 1.4;
}

.text-content h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* 轮播图容器 */
.carousel-container {
  width: 90%;
  max-width: 1000px;
  height: 400px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 功能选项卡 */
.feature-tabs {
  margin: 2rem auto;
  max-width: 1280px;
  padding: 0 1rem;
}

.tab-container {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.tab {
  position: relative;
  flex: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  height: 200px;
}

.tab-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: all 0.3s ease;
  border-radius: 0.75rem;
}

.tab-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  /* 默认状态下显示半透明的黑色覆盖层 */
  background-color: rgba(0, 0, 0, 0.4);
}

.tab-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
  z-index: 2;
}

.tab-content h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
}

/* 鼠标悬停效果 */
.tab:hover .tab-overlay {
  /* 鼠标悬停时显示半透明的蓝色覆盖层 */
  background-color: rgba(0, 100, 255, 0.7);
}

.tab:hover .tab-content h3 {
  border-bottom: 2px solid white;
  padding-bottom: 0.2rem;
}

/* 响应式布局 */
@media (min-width: 768px) {
  .hero-module {
    padding: 6rem 2rem;
  }

  .text-content h2 {
    font-size: 2.2rem;
  }

  .text-content h1 {
    font-size: 2.8rem;
  }

  .demo-module {
    margin: 6rem auto;
    padding: 0 2rem;
  }

  /* 在较大屏幕上增加选项卡的大小 */
  .tab {
    height: 240px;
  }

  .tab-content h3 {
    font-size: 1.5rem;
    color: white;
  }
}

/* 功能演示模块 */
.demo-module {
  max-width: 1280px;
  margin: 4rem auto;
  padding: 0 1rem;
}

.demo-image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 鼠标悬停效果 */
.demo-image:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
</style>